<template>
<view>
    <seach/>
    <!-- 分类 -->
      <view class="category" v-if="categoriesList.length">
        <!-- 顶级分类 -->
        <view class="sup">
          <scroll-view scroll-y >
            <text   @click="getChilder(index)" v-for="(item, index) in categoriesList" :key="item.cat_id" :class="{active:currIndex===index}">{{item.cat_name}}</text>
          </scroll-view>
        </view>
        <!-- 子级分类 -->
        <view class="sub">
          <scroll-view scroll-y>
            <!-- 封面图 -->
            <image src="http://static.botue.com/ugo/uploads/category.png" class="thumb"></image>
            <view class="children" v-for="item1 in getCategoriesList" :key="item1.cat_id">
              <view class="title" >{{item1.cat_name}}</view>
              <!-- 品牌 -->
              <view class="brands" >
                <navigator url="/pages/list/index" v-for="item2 in item1.children" :key="item2.cat_id">
                  <image :src="item2.cat_icon"></image>
                  <text>{{item2.cat_name}}</text>
                </navigator>
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
</view>
</template>

<script>
import seach from '@/components/seach'
export default {
	data () {
		return {
			categoriesList:[],
			currIndex:'0'
		}
	},
    components:{
        seach
    },
	computed:{
		getCategoriesList(){
			return this.categoriesList.length && this.categoriesList[this.currIndex].children
		}
	},
	onLoad() {
		this.getCategor();
	},
	methods: {
		async getCategor () {
			  const {message}=await this.http({
				  url:'/api/public/v1/categories',
				  methods:'GET'
			  })
			  // console.log(message)
			  this.categoriesList=message
		  },
		  getChilder (index) {
			  // console.log(index)
			  this.currIndex=index
		  }
	}
}
</script>

<style lang="less" scoped>
	scroll-view {
	  height: 100%;
	}
	
	.category {
	  display: flex;
	  width: 100%;
	  position: absolute;
	  top: 100rpx;
	  bottom: 0;
	
	  .sup {
	    width: 196rpx;
	    background-color: #f4f4f4;
	
	    text {
	      display: block;
	      height: 100rpx;
	      text-align: center;
	      line-height: 100rpx;
	      font-size: 27rpx;
	      color: #333;
	      border-bottom: 1rpx solid #eee;
	
	      &:last-child {
	        border-bottom: none;
	      }
	      
	      &.active {
	        background-color: #FFF;
	        color: #ea4451;
	        position: relative;
	
	        &::before {
	          content: '';
	          display: block;
	          width: 8rpx;
	          height: 60rpx;
	          transform: translateY(-50%);
	          background-color: #ea4451;
	
	          position: absolute;
	          left: 0;
	          top: 50%;
	        }
	      }
	    }
	  }
	
	  .sub {
	    flex: 1;
	    padding: 20rpx 18rpx;
	
	    .thumb {
	      width: 100%;
	      height: 180rpx;
	    }
	
	    .children {
	      text-align: center;
	      color: #333;
	
	      .title {
	        display: inline-block;
	        margin: 40rpx 0 20rpx;
	        font-size: 30rpx;
	
	        &::before {
	          content: '/';
	          margin-right: 20rpx;
	          color: #666;
	        }
	
	        &::after {
	          content: '/';
	          margin-left: 20rpx;
	          color: #666;
	        }
	      }
	    }
	
	    .brands {
	      display: flex;
	      flex-wrap: wrap;
	
	      navigator {
	        width: 33%;
	        margin-bottom: 20rpx;
	      }
	
	      image {
	        width: 120rpx;
	        height: 120rpx;
	      }
	
	      text {
	        display: block;
	        font-size: 24rpx;
	      }
	    }
	  }
	}
</style>
